<template>
  <div class="main">
    <div class="serbox">
      <div class="left">
        <el-cascader
          :options="fenlei"
          clearable
          v-model="oneClassId"
          @change="conId1"
          :show-all-levels="false"
          :props="props"
        ></el-cascader>
        <div class="inp">
          <el-input placeholder="请输入搜索内容" v-model="searchText">
          </el-input>
        </div>
        <el-button
          type="primary"
          style="margin-left: 15px"
          size="medium"
          @click="search"
          >查询</el-button
        >
      </div>
      <el-button type="primary" @click="shelves" style="margin-right: -400px">一键上架</el-button>
      <el-button type="primary" @click="openpop">添加普通商品</el-button>
    </div>
    <div class="table">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column type="index" label="序号" width="90">
        </el-table-column>
        <el-table-column label="商品图片">
          <template slot-scope="scope">
            <img :src="scope.row.imgurl" style="width: 111px; height: 111px" />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="商品名称"> </el-table-column>
        <el-table-column label="首页推荐">
          <template slot-scope="scope">
            <span>{{ scope.row.recomSy == 1 ? "推荐" : "不推荐" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="详情推荐">
          <template slot-scope="scope">
            <span>{{ scope.row.recomXq == 1 ? "推荐" : "不推荐" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="购物车推荐">
          <template slot-scope="scope">
            <span>{{ scope.row.recomGwc == 1 ? "推荐" : "不推荐" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.disabled == 0" style="color:#1A69E0">上架</span>
            <span v-if="scope.row.disabled == 1" style="color:#D94511">下架</span>
            <span v-if="scope.row.disabled == 2" style="color:#c618d9">平台下架</span>
          </template>
        </el-table-column>
        <el-table-column prop="gmtCreate" label="时间" width="170">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              @click="chodel(scope.row)"
              type="text"
              style="color: red"
              size="small"
              >删除</el-button
            >
            <el-button
              @click="handleClick(scope.row, 0)"
              type="text"
              style="color: #606266"
              size="small"
              >详情</el-button
            >
            <el-button
              @click="handleClick(scope.row, 1)"
              type="text"
              style="color: #606266"
              size="small"
              >修改</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <div class="btns">
        <!-- <el-button type="primary">批量删除</el-button> -->
      </div>
      <el-pagination
        background
        @current-change="changePage"
        :current-page.sync="page"
        :page-size="10"
        layout="total,prev,pager,next,jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 弹框 -->
    <el-dialog title="商品信息" :visible.sync="outpop" v-if="outpop">
      <!-- 外层弹框 -->
      <div>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="130px"
          class="demo-ruleForm"
        >
          <el-form-item label="商品分类" prop="classId">
            <el-cascader
              :options="fenlei"
              v-model="ruleForm.classId"
              @change="conId"
              :show-all-levels="false"
              :props="props"
              :disabled="!isedit"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="商品规格" prop="typeId">
            <el-select
              v-model="ruleForm.typeId"
              placeholder="请选择商品规格"
              @change="settype"
              :disabled="!isedit"
            >
              <el-option
                v-for="(item, index) in types"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品名称" prop="name">
            <el-input
              v-model="ruleForm.name"
              placeholder="请输入商品名称"
              maxlength="20"
              :disabled="!isedit"
            ></el-input>
          </el-form-item>
          <!-- --图片start-- -->
          <el-form-item label="列表图片" prop="bannerList">
            <el-upload
              :action="baseUrl + '/common/upload'"
              class="imgbox"
              :show-file-list="false"
              list-type="picture-card"
              :on-success="handleAvatarSuccess1"
              :before-upload="beforeUpload"
              :disabled="!isedit"
            >
              <i
                slot="default"
                class="el-icon-plus"
                v-if="!ruleForm.imgurl"
              ></i>
              <img
                :src="ruleForm.imgurl"
                v-if="ruleForm.imgurl"
                style="width: 100%; height: 100%"
              />
            </el-upload>
          </el-form-item>
          <el-form-item label="轮播图" prop="bannerList">
            <div class="alog-box">
              <div
                class="alog-img"
                v-for="(item, index) in ruleForm.bannerList"
                :key="index"
              >
                <img :src="item.imgurl" />
                <div class="alog-shadow" v-if="isedit">
                  <i class="el-icon-delete" @click="handleRemove(index, 1)"></i>
                </div>
              </div>
              <el-upload
                :action="baseUrl + '/common/upload'"
                class="imgbox"
                :multiple="true"
                :show-file-list="false"
                list-type="picture-card"
                :on-success="handleAvatarSuccess2"
                :before-upload="beforeUpload"
                :disabled="!isedit"
                v-if="isedit"
              >
                <i slot="default" class="el-icon-plus"></i>
              </el-upload>
            </div>
          </el-form-item>
          <el-form-item label="商品详情图" prop="detailImgList">
            <div class="alog-box">
              <div
                class="alog-img"
                v-for="(item, index) in ruleForm.detailImgList"
                :key="index"
              >
                <img :src="item.imgurl" />
                <div class="alog-shadow" v-if="isedit">
                  <i class="el-icon-delete" @click="handleRemove(index, 2)"></i>
                </div>
              </div>
              <el-upload
                :action="baseUrl + '/common/upload'"
                class="imgbox"
                :multiple="true"
                :show-file-list="false"
                list-type="picture-card"
                :on-success="handleAvatarSuccess3"
                :before-upload="beforeUpload"
                :disabled="!isedit"
                v-if="isedit"
              >
                <i slot="default" class="el-icon-plus"></i>
              </el-upload>
            </div>
          </el-form-item>
          <!-- --图片end-- -->
          <el-form-item label="参数" prop="param" v-if="isedit">
            <el-button type="primary" size="mini" @click="setguige(2)"
              >参数管理</el-button
            >
            <!-- <span style="padding-left:10px;">已选：{{ruleForm.productList&&ruleForm.productList.length>0?guige:'无'}}</span> -->
          </el-form-item>
          <el-form-item label="使用规格" prop="hasSpec">
            <el-radio-group v-model="ruleForm.hasSpec" v-if="!ruleForm.id">
              <el-radio :label="0">不使用规格</el-radio>
              <el-radio :label="1">使用规格</el-radio>
            </el-radio-group>
            <span v-if="ruleForm.id">{{
              ruleForm.hasSpec == 1 ? "使用规格" : "不使用规格"
            }}</span>
          </el-form-item>
          <el-form-item
            label="规格"
            prop="productList"
            v-if="ruleForm.hasSpec == 1"
          >
            <el-button
              type="primary"
              size="mini"
              v-if="isedit"
              @click="setguige(1)"
              >规格管理</el-button
            >
            <span style="padding-left: 10px"
              >已选：{{
                ruleForm.productList && ruleForm.productList.length > 0
                  ? guige
                  : "无"
              }}</span
            >
          </el-form-item>
          <el-form-item label="sku货号" prop="sku" v-if="ruleForm.hasSpec == 0">
            <el-input
              v-model="ruleForm.sku"
              placeholder="请输入sku货号"
              :disabled="!isedit"
            ></el-input>
          </el-form-item>
          <el-form-item label="价格" prop="price" v-if="ruleForm.hasSpec == 0">
            <el-input
              v-model="ruleForm.price"
              placeholder="请输入价格"
              :disabled="!isedit"
            ></el-input>
          </el-form-item>
          <el-form-item label="库存" prop="stock" v-if="ruleForm.hasSpec == 0">
            <el-input
              v-model="ruleForm.stock"
              placeholder="请输入库存"
              :disabled="!isedit"
            ></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="disabled">
            <el-radio-group v-model="ruleForm.disabled" :disabled="!isedit">
              <el-radio :label="0" :disabled="value">上架</el-radio>
              <el-radio :label="1" :disabled="value">下架</el-radio>
              <el-radio :label="2" :disabled="value1">平台下架</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="运费" prop="costMoney">
            <el-input
              v-model="ruleForm.costMoney"
              placeholder="请输入运费"
              :disabled="!isedit"
            ></el-input>
          </el-form-item>
          <el-form-item label="商品介绍" prop="title">
            <el-input
              type="textarea"
              v-model="ruleForm.title"
              maxlength="150"
              placeholder="请输入商品介绍"
              :disabled="!isedit"
            ></el-input>
          </el-form-item>
          <el-form-item label="售后服务" prop="afterSale">
            <el-input
              type="textarea"
              v-model="ruleForm.afterSale"
              placeholder="请输入售后服务"
              maxlength="150"
              :disabled="!isedit"
            ></el-input>
          </el-form-item>
          <el-form-item label="是否开票" prop="isInvoice">
            <el-radio-group v-model="ruleForm.isInvoice" :disabled="!isedit">
              <el-radio :label="0">开票</el-radio>
              <el-radio :label="1">不开票</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="submitForm('ruleForm')"
              v-if="isedit"
              >修 改</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <el-dialog
        width="50%"
        title="规格信息"
        :visible.sync="interpop"
        append-to-body
      >
        <!-- 内层弹框 -->
        <div class="speclist" v-for="item in specList" :key="item.id">
          <span>{{ item.spec.name }}</span>
          <div class="specR">
            <el-checkbox-group v-model="item.checkList">
              <el-checkbox
                :label="it"
                v-for="it in item.specValList"
                :key="it.id"
                >{{ it.specValText }}</el-checkbox
              >
            </el-checkbox-group>
          </div>
        </div>
        <el-button type="primary" size="mini" @click="shengcheng"
          >生成规格表</el-button
        >
        <el-form
          inline
          :rules="rules1"
          class="splist"
          :ref="'guiform' + index"
          v-for="(item, index) in newList"
          :key="index"
          :model="item"
        >
          <el-form-item prop="name">
            <span class="tit">{{ item.name }}</span>
          </el-form-item>
          <el-form-item prop="sku">
            <el-input
              style="width: 150px; margin-right: 10px"
              placeholder="请输入sku"
              v-model="item.sku"
            ></el-input>
          </el-form-item>
          <el-form-item prop="price">
            <el-input
              type="number"
              placeholder="请输入价格"
              v-model="item.price"
              style="width: 150px; margin-right: 10px"
              step="0.01"
            ></el-input>
          </el-form-item>
          <el-form-item prop="stock">
            <el-input
              type="number"
              placeholder="请输入库存"
              v-model="item.stock"
              style="width: 150px"
            ></el-input>
          </el-form-item>
          <el-form-item prop="name">
            <el-radio
              v-model="ruleForm.default"
              :label="index"
              @change="setdefault"
              >默认</el-radio
            >
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="fixguige">确 定</el-button>
      </el-dialog>
      <el-dialog
        width="50%"
        title="参数设置"
        :visible="paramList && paramList.length > 0"
        :before-close="beforeClose"
        append-to-body
      >
        <el-form
          inline
          class="splist"
          :ref="'param' + index"
          v-for="(item, index) in paramList"
          :key="index"
          :model="item"
        >
          <el-form-item prop="name">
            <span class="tit">{{ item.name }}</span>
          </el-form-item>
          <el-form-item prop="value">
            <el-input
              style="width: 150px; margin-right: 10px"
              placeholder="请输入参数值"
              maxlength="30"
              v-model="item.value"
              :disabled="!isedit"
            ></el-input>
          </el-form-item>
        </el-form>
        <el-button type="primary" v-if="isedit" @click="fixparam"
          >确 定</el-button
        >
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    var setprice = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入价格"));
      } else if (typeof value == "number") {
        return callback();
      } else if (
        value.indexOf(".") == 0 ||
        value.indexOf(".") == value.length - 1
      ) {
        return callback(new Error("请输入正确格式的价格"));
      } else if (
        value.indexOf(".") > 0 &&
        value.indexOf(".") < value.length - 3
      ) {
        return callback(new Error("最多两位小数"));
      } else if (!(parseFloat(value) > 0)) {
        return callback(new Error("价格必须大于0"));
      } else {
        return callback();
      }
    };
    var setstock = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入价格"));
      } else if (typeof value == "number") {
        return callback();
      } else if (value.indexOf(".") != -1) {
        return callback(new Error("库存必须是整数"));
      } else if (!(parseInt(value) >= 0)) {
        return callback(new Error("库存不能小于0"));
      } else {
        return callback();
      }
    };
    var setarr = (rule, value, callback) => {
      if (!(value && value.length > 0)) {
        return callback(new Error("请上传图片"));
      } else {
        return callback();
      }
    };
    var setproduct = (rule, value, callback) => {
      if (this.ruleForm.hasSpec == 0) {
        return callback();
      } else if (
        !(this.ruleForm.productList && this.ruleForm.productList.length > 0)
      ) {
        return callback(new Error("请设置规格"));
      } else {
        return callback();
      }
    };
    var setsku1 = (rule, value, callback) => {
      if (this.ruleForm.hasSpec == 1) {
        return callback();
      } else if (typeof value == "number") {
        return callback();
      } else if (!value) {
        return callback(new Error("请输入sku库号"));
      } else {
        return callback();
      }
    };
    var setprice1 = (rule, value, callback) => {
      if (this.ruleForm.hasSpec == 1) {
        return callback();
      } else {
        return setprice(rule, value, callback);
      }
    };
    var setstock1 = (rule, value, callback) => {
      if (this.ruleForm.hasSpec == 1) {
        return callback();
      } else {
        return setstock(rule, value, callback);
      }
    };
    var setcost = (rule, value, callback) => {
      if (value && parseInt(value) == 0) {
        return callback();
      } else {
        return setprice(rule, value, callback);
      }
    };
    return {
      value: false,
      value1: true,
      choDate: "",
      searchText: "",
      list: [],
      fenlei: [],
      types: [],
      props: { label: "name", value: "id", children: "childList" },
      tableData: [],
      page: 1,
      total: 0,
      outpop: false,
      interpop: false,
      ruleForm: { name: "", nav: "", radio: "" },
      rules: {
        classId: [
          { required: true, message: "请选择商品分类", trigger: "change" },
        ],
        typeId: [
          { required: true, message: "请选择商品类型", trigger: "change" },
        ],
        name: [{ required: true, message: "请输入商品名称", trigger: "blur" }],
        bannerList: [{ validator: setarr, trigger: "change" }],
        detailImgList: [{ validator: setarr, trigger: "change" }],
        productList: [{ validator: setproduct, trigger: "change" }],
        sku: [{ validator: setsku1, trigger: "blur" }],
        price: [{ validator: setprice1, trigger: "blur" }],
        stock: [{ validator: setstock1, trigger: "blur" }],
        costMoney: [{ validator: setcost, trigger: "blur" }],
        title: [{ required: true, message: "请输入商品介绍", trigger: "blur" }],
        afterSale: [
          { required: true, message: "请输入商品介绍", trigger: "blur" },
        ],
      },
      rules1: {
        sku: [{ required: true, message: "请输入sku货号", trigger: "blur" }],
        price: [{ validator: setprice, trigger: "blur" }],
        stock: [{ validator: setstock, trigger: "blur" }],
      },
      lunbolist: [], // 轮播图列表
      detailList: [], // 商品详情图列表
      checkList: [],
      specList: [],
      newList: [],
      baseUrl: "",
      oneClassId: "",
      spec: [],
      paramList: [],
      isedit: true,
    };
  },
  mounted() {
    this.baseUrl = this.$baseUrl;
    this.gettypes();
    this.getlist();
    this.getfenlei();
  },
  computed: {
    guige() {
      var a = "";
      if (
        this.ruleForm &&
        this.ruleForm.productList &&
        this.ruleForm.productList.length > 0
      ) {
        this.ruleForm.productList.forEach((item) => {
          a = a == "" ? a : a + " ";
          a = a + item.spec;
        });
      }
      return a;
    },
  },
  methods: {
    getlist() {
      this.$postRequest("/mall/goodsGoods/list", {
        shopId: sessionStorage.getItem("shopId"),
        pageSize: 10,
        pageNum: this.page,
        name: this.searchText,
        classId: this.oneClassId,
        category: 0, // 商品类别(0默认普通商品 1服务商品)
      }).then((res) => {
        this.tableData = res.rows;
        this.total = res.total;
      });
    },
    gettypes() {
      this.$postRequest("/mall/goodsType/list", {
        shopId: sessionStorage.getItem("shopId"),
      }).then((res) => {
        this.types = res.rows;
      });
    },
    getfenlei() {
      this.$getRequest("/mall/goodsClass/getAll", {}).then((res) => {
        this.fenlei = res.data;
      });
    },
    changePage(e) {
      this.getlist();
    },
    chodel(e) {
      this.$confirm("此操作将永久删除该商品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$postRequest("/mall/goodsGoods/remove", {
          id: e.id,
        }).then((res) => {
          this.$message.success("删除成功");
          this.getlist();
        });
      });
    },
    // 添加商品按钮
    openpop() {
      this.outpop = true;
      this.isedit = true;
      this.ruleForm = {
        hasSpec: 0,
        isInvoice: 1,
        disabled: 0,
        shopId: sessionStorage.getItem("shopId"),
        category: 0,
        param: "[]",
      };
    },
    //一键上架
    shelves(e) {
      this.$confirm("一键上架商品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$postRequest("/mall/goodsGoods/shelves", {
          shopId: sessionStorage.getItem("shopId"),
          category: 0, // 商品类别(0默认普通商品 1服务商品)
        }).then((res) => {
          this.$message.success("成功");
          this.getlist();
        });
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var a = { ...this.ruleForm };
          if (a.hasSpec == 0) {
            a.productList = [
              {
                sku: a.sku,
                price: a.price,
                stock: a.stock,
                name: "",
                spec: "",
                id:
                  a.productList && a.productList[0] ? a.productList[0].id : "",
                isDefault: "1",
              },
            ];
            a.spec = "[]";
          }
          if (!a.param) {
            a.param = "[]";
          }
          if (a.id) {
            this.$postRequest("/mall/goodsGoods/edit", a).then((res) => {
              this.$message.success("修改成功");
              this.getlist();
              this.outpop = false;
            });
          } else {
            var newtime = new Date().getTime();
            var maxtime = parseInt(sessionStorage.getItem("time"));
            if (maxtime && newtime < maxtime) {
            } else {
              sessionStorage.setItem("time", newtime + 2000);
              this.$postRequest("/mall/goodsGoods/add", a).then((res) => {
                this.$message.success("添加成功");
                this.page = 1;
                this.getlist();
                this.outpop = false;
              });
            }
          }
        }
      });
    },
    // 文件上传前的钩子，数为上传的文件
    beforeUpload(file) {
      // 判断图片是否大于2M
      const isLt2M = file.size / 1024 / 1024 < 10;
      // 判断图片的类型
      const isJpg =
        file.type == "image/jpeg" ||
        file.type == "image/jpg" ||
        file.type == "image/png" ||
        file.type == "image/gif";
      if (!isJpg) {
        this.$message.error("只能上传jpg, jpeg, png, gif格式的图片！");
        return false;
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 10MB!");
        return false;
      }
      if (!this.isedit) {
        return false;
      }
    },
    // 修改
    handleClick(row, type) {
      if (type == 0) {
        // 详情
        this.isedit = false;
      } else if (type == 1) {
        // 修改
        this.isedit = true;
        this.value = false;
      }
      this.$getRequest("/mall/goodsGoods/" + row.id, {}).then((res) => {
        if (res.data.hasSpec == 0) {
          res.data.price = "" + res.data.productList[0].price;
          res.data.sku = "" + res.data.productList[0].sku;
          res.data.stock = "" + res.data.productList[0].stock;
        }
        res.data.costMoney = "" + res.data.costMoney;
        this.ruleForm = res.data;
        console.log(this.ruleForm);
        if (this.ruleForm.disabled == 2) {
          this.value = true;
        }
        this.outpop = true;
      });
    },
    // 修改默认后强制更新视图
    setdefault() {
      this.$forceUpdate();
    },
    settype() {
      this.ruleForm.xiugai = true;
    },
    conId(e) {
      if (typeof this.ruleForm.classId == "object") {
        this.ruleForm.classId = this.ruleForm.classId[1];
        console.log(this.ruleForm.classId);
        console.log("调用了规格");
      }
    },
    conId1(e) {
      if (typeof this.oneClassId == "object") {
        this.oneClassId = this.oneClassId[1];
      } else if (!this.oneClassId) {
        this.oneClassId = "";
      }
      // this.getlist();
    },
    // 确定规格表
    fixguige() {
      if (!this.newList || this.newList.length == 0) {
        this.$message.error("请至少选择一种规格");
      } else if (this.ruleForm.default == -1) {
        this.$message.error("请选择默认规格");
      } else {
        var flag = true;
        for (var i = 0; i < this.newList.length; i++) {
          this.$refs["guiform" + i][0].validate((valid) => {
            if (!valid) {
              flag = false;
            }
          });
        }
        if (flag) {
          var a = this.newList;
          for (var i = 0; i < a.length; i++) {
            a[i].isDefault = this.ruleForm.default == i ? "1" : "0";
          }
          this.ruleForm.productList = a;
          this.ruleForm.spec = JSON.stringify(this.spec);
          this.newList = [];
          this.interpop = false;
        }
      }
    },
    // 生成规格表
    shengcheng() {
      var a = [...this.specList];
      var arr = [];
      var arr1 = [];
      var arr2 = [];
      console.log(a);
      if (!(a[1] && a[1].checkList && a[1].checkList.length > 0)) {
        a.splice(1, 2);
      }
      if (!(a[0] && a[0].checkList && a[0].checkList.length > 0)) {
        a.splice(0, 1);
      }
      if (a.length == 0) {
        this.$message.error("请至少选择一种规格");
        return;
      } else if (a.length == 1) {
        var b = a[0].checkList;
        var arrx = [];
        b.forEach((item) => {
          arr.push({
            id: "",
            name: item.specValText,
            spec: a[0].spec.name + ":" + item.specValText,
          });
          arrx.push({
            specName: a[0].spec.name,
            specType: 0,
            specId: a[0].spec.id,
            specValueId: item.id,
            specValueName: item.specValText,
          });
        });
        arr2.push({
          specName: a[0].spec.name,
          specType: 0,
          specId: a[0].specId,
          specValues: arrx,
        });
      } else if (a.length == 2) {
        var b = a[0].checkList;
        var c = a[1].checkList;
        var arrx = [];
        b.forEach((item1) => {
          arrx.push({
            specName: a[0].spec.name,
            specType: 0,
            specId: a[0].spec.id,
            specValueId: item1.id,
            specValueName: item1.specValText,
          });
          c.forEach((item2) => {
            arr.push({
              id: "",
              name: item1.specValText + " " + item2.specValText,
              spec:
                a[0].spec.name +
                ":" +
                item1.specValText +
                "*" +
                a[1].spec.name +
                ":" +
                item2.specValText,
            });
          });
        });
        arr2.push({
          specName: a[0].spec.name,
          specType: 0,
          specId: a[0].specId,
          specValues: arrx,
        });
        arrx = [];
        c.forEach((item) => {
          arrx.push({
            specName: a[1].spec.name,
            specType: 0,
            specId: a[1].spec.id,
            specValueId: item.id,
            specValueName: item.specValText,
          });
        });
        arr2.push({
          specName: a[1].spec.name,
          specType: 0,
          specId: a[1].specId,
          specValues: arrx,
        });
      }
      this.newList = arr;
      this.spec = arr2;
      this.ruleForm.default = -1;
    },
    // 1打开规格表 2打开参数表
    setguige(num) {
      if (this.ruleForm.typeId) {
        this.$getRequest("/mall/goodsType/" + this.ruleForm.typeId, {}).then(
          (res) => {
            if (num == 1) {
              var arr = res.data.typeSpecList;
              for (var i = 0; i < arr.length; i++) {
                arr[i].checkList = [];
              }
              var arr1 = this.ruleForm.productList;
              if (arr1 && arr1.length > 0) {
                for (var i = 0; i < arr1.length; i++) {
                  if (arr1[i].isDefault == "1") {
                    this.ruleForm.default = i;
                    break;
                  }
                }
              } else {
                this.$message.error("该类型暂未添加参数");
              }
              this.newList = this.ruleForm.productList || [];
              this.specList = res.data.typeSpecList;
              this.interpop = true;
            } else if (num == 2) {
              if (this.ruleForm.id && !this.ruleForm.xiugai) {
                this.paramList = JSON.parse(this.ruleForm.param);
                if (this.paramList.length == 0) {
                  this.$message.error("该类型暂未添加参数");
                }
              } else {
                var arr = res.data.typeParamsList;
                if (arr.length == 0) {
                  this.$message.error("该类型暂未添加参数");
                } else {
                  this.paramList = arr.map((item) => {
                    return { name: item.name, value: "" };
                  });
                }
              }
            }
          }
        );
      } else {
        this.$message.error("请先选择商品类型");
      }
    },
    // 确定参数表
    fixparam() {
      this.ruleForm.param = JSON.stringify(this.paramList);
      this.paramList = [];
    },
    // 关闭参数表
    beforeClose() {
      this.paramList = [];
    },
    handleAvatarSuccess1(response, file, fileList) {
      this.ruleForm.imgurl = response.msg;
      this.setdefault();
    },
    handleAvatarSuccess2(response, file, fileList) {
      //上传图片成功
      if (this.ruleForm.bannerList) {
        this.ruleForm.bannerList.push({ imgurl: response.msg });
      } else {
        this.ruleForm.bannerList = [{ imgurl: response.msg }];
      }
      this.setdefault();
    },
    handleAvatarSuccess3(response, file, fileList) {
      //上传图片成功
      if (this.ruleForm.detailImgList) {
        this.ruleForm.detailImgList.push({ imgurl: response.msg });
      } else {
        this.ruleForm.detailImgList = [{ imgurl: response.msg }];
      }
      this.setdefault();
    },
    handleRemove(index, num) {
      //删除图片
      if (num == 1) {
        this.ruleForm.bannerList.splice(index, 1);
      } else if (num == 2) {
        this.ruleForm.detailImgList.splice(index, 1);
      }
      this.setdefault();
    },
    search() {
      this.getlist();
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .el-table th > .cell,
/deep/ .el-table .cell {
  text-align: center;
}
/deep/ .el-button--primary {
  background-color: #0655ce;
  border-color: #0655ce;
}
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner,
/deep/ .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #0655ce;
  border-color: #0655ce;
}
/deep/ .el-radio__input.is-checked + .el-radio__label {
  color: #0655ce;
}
/deep/ .el-radio__input.is-checked .el-radio__inner {
  background-color: #0655ce;
  border-color: #0655ce;
}
/deep/ .el-input.is-disabled .el-input__inner,
/deep/ .el-textarea.is-disabled .el-textarea__inner {
  color: #606266;
  background-color: #fff;
  cursor: default;
}
.main {
  margin: 20px;
  background: #fff;
  .serbox {
    height: 60px;
    padding: 0 20px;
    align-items: center;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eeeeee;
    .left {
      display: flex;
      .inp {
        margin-left: 20px;
      }
    }
  }
}
.table {
  border: 1px solid #eee;
  margin: 20px;
}
.page {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
  height: 60px;
}
.imgbox {
  // border: 1px solid red;
  /deep/ .el-upload--picture-card {
    width: 110px;
    height: 110px;
    line-height: 120px;
  }
  /deep/ .el-upload-list--picture-card .el-upload-list__item {
    width: 110px;
    height: 110px;
  }
}

.speclist {
  display: flex;
  margin-bottom: 20px;
  > span {
    display: inline-block;
    width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .specR {
    width: calc(100% - 80px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    .sp-right {
      margin: 0 10px;
    }
  }
}
.splist {
  // border: 1px solid red;
  display: flex;
  align-items: center;
  margin: 20px 0;
  .tit {
    // border: 1px solid red;
    width: 80px;
  }
}
.alog-box {
  width: calc(100% - 100px);
  background: #fff;
  border: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
.alog-img {
  margin-right: 10px;
}
.alog-img,
.alog-img > img {
  width: 111px;
  height: 111px;
  position: relative;
}
.alog-img .alog-shadow {
  width: 111px;
  height: 111px;
  background: rgba(0, 0, 0, 0.6);
  text-align: center;
  line-height: 111px;
  color: #fff;
  font-size: 24px;
  position: absolute;
  left: 0;
  top: 0;
  transition: all 1s;
  opacity: 0;
}
.alog-img:hover .alog-shadow {
  opacity: 1;
}
.alog-shadow i {
  padding: 5px;
  cursor: pointer;
}
</style>
